<template>
    <div class="user_info">
        <van-nav-bar title="用户信息" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="top">
            <div class="verify">
                <i class="zx-icon">&#xe644;</i>&nbsp;&nbsp;已认证
            </div>
            <div class="headbox">
                <div class="head">
                      <img :src="user.headimgurl" alt="">
                      <P class="username">{{user.nickname}} <i>♂ 男 </i> <em>23 岁</em></P>
                      <!--<p class="subname">岁月随心 · 终会淡然</p>-->
                </div>
            </div>
        </div>
        <div class="works">
            <div class="">
                <span>自我介绍</span>
                <div style="display: block;padding-top: 3px;">
                    <div style="color:#626262;padding-top: 10px;font-size: 14px;">
                        <p style="word-wrap:break-word;"> {{desShow?desShow:'暂无数据'}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="work" class="works">
            <div class="box">
                <span>Ta的作品</span>
                <div>
                    <img @click="imgfn" v-for="(works,i) in work" :src="works.imgurl?works.imgurl:''" alt="" :key="i">

                </div>
            </div>
        </div>
        <div v-if="userBaseInfo" class="baseinfo">
            <h3>基本信息</h3>
            <div>
                <p><span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span><i>{{userBaseInfo.uname}}</i></p>
                <p><span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span><i>{{userBaseInfo.sex}}</i></p>
                <p><span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄</span><i>{{userBaseInfo.age}}</i></p>
                <p><span>手机号</span><i>{{userBaseInfo.contact}}</i></p>
                <p><span>qq</span><i>{{userBaseInfo.qq}}</i></p>
                <p><span>微信</span><i>{{userBaseInfo.wechat}}</i></p>
            </div>
        </div>
        <div v-show="false" class="baseinfo skill">
            <h3>技能信息</h3>
            <div>
                <div class="item">
                    <p>Photoshop</p>
                    <van-progress :percentage="75" pivot-text="熟练"/>
                </div>
                <div class="item">
                    <p>Node</p>
                    <van-progress :percentage="35" pivot-text="了解"/>
                </div>
                <div class="item">
                    <p>Sketch</p>
                    <van-progress :percentage="60" pivot-text="熟悉"/>
                </div>
                <div class="item">
                    <p>webstorm</p>
                    <van-progress :percentage="90" pivot-text="精通"/>
                </div>
            </div>
        </div>
        <div v-if="edu" class="baseinfo edu">
            <h3>教育经历</h3>
            <div>
                <p><span>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;校</span><i>{{edu.school}}</i></p>
                <p><span>专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</span><i>{{edu.speciality}}</i></p>
                <p><span>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历</span><i>{{edu.record}}</i></p>
                <p><span>开始时间</span><i>{{edu.start_time}}</i></p>
                <p><span>结束时间</span><i>{{edu.end_time}}</i></p>
            </div>
        </div>
        <div v-show="false" class="baseinfo items">
            <h3>项目经历</h3>
            <div>
                <van-steps direction="vertical" :active="0" active-color="#f60">
                    <van-step>
                        <div><p>2016-07-12 12:40</p></div>
                        <div><strong>【项目名称】微信小程序</strong></div>
                        <div><strong>【项目职责】小程序前端开发</strong></div>
                        <div class="text">
                            1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                            2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                        </div>
                    </van-step>
                    <van-step>
                        <div><p>2016-07-12 12:40</p></div>
                        <div><strong>【项目名称】微信小程序</strong></div>
                        <div><strong>【项目职责】小程序前端开发</strong></div>
                        <div class="text">
                            1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                            2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                        </div>
                    </van-step>
                </van-steps>
            </div>
        </div>
        <div v-show="false" class="baseinfo items">
            <h3>项目经历</h3>
            <div>
                <van-steps direction="vertical" :active="0" active-color="#f60">
                    <van-step>
                        <div><p>2016-07-12 12:40</p></div>
                        <div><strong>【项目职责】小程序前端开发</strong></div>
                        <div class="text">
                            1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                            2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                        </div>
                    </van-step>
                    <van-step>
                        <div><p>2016-07-12 12:40</p></div>
                        <div><strong>【项目职责】小程序前端开发</strong></div>
                        <div class="text">
                            1.独立负责各个项目中的设计工作，包括移动端应用、网页设计、后台管理、公众号页面设计，并向客户汇报设计工作。
                            2.参与目标用户的研究，参与总结产品需求，制定用户需求调
                        </div>
                    </van-step>
                </van-steps>
            </div>
        </div>
        <div class="baseinfo linsk">
            <h3>作品连接</h3>
            <div>
                <p v-for="(links,i) in links" :key="i"><a href="javascript:;" @click="gotoFn(links.links)">{{links.links}}</a></p>
            </div>
        </div>
    </div>
</template>

<script>
    import { Progress } from 'vant';
    import { Step, Steps } from 'vant';
    import { ImagePreview } from 'vant';
    import Vue from 'vue';
    Vue.use(Step).use(Steps);
    Vue.use(Progress).use(ImagePreview);
    export default {
        data(){
            return{
                userBaseInfo:'',
                user:'',
                work:'',
                links:'',
                edu:'',
                desShow:'',
            }
        },
        methods: {
            getDes(){
                this.$axios.post('/api/des/get',{uid:this.$route.query.uid}).then(res=>{
                    if(res.data.err_code ==0){
                        this.desShow = res.data.data.des;
                    }
                })
            },
            eduGet(){
                this.$post('/api/edu/get',{
                    uid:this.$route.query.uid
                }).then(res=>{
                    if(res.data.err_code ==0){
                        this.edu = res.data.data;
                    }else{
                        this.$toast({message:res.data.err_msg})
                    }
                }).catch(()=>{
                    //
                })
            },
            gotoFn(links){
              window.location.href=links;
            },
            LinksGet(){
                let uid = '';
                if (localStorage.getItem('user')) {
                    uid = this.$route.query.uid;
                }
                this.$post('/api/links/get', {uid}).then(res => {
                    console.log(res)
                    if (res.data.err_code == 0) {
                        this.links = res.data.data;
                    }
                }).catch(() => {
                    //
                })
            },
            WorkGet(){
                let uid = '';
                if(localStorage.getItem('user')){
                    uid = this.$route.query.uid;
                }
                this.$post('/api/works/get',{uid}).then(res=>{
                    console.log(res)
                    if(res.data.err_code ==0){
                        this.work = res.data.data;
                    }
                }).catch(()=>{
                    //
                })
            },
            userBaseInfoFn(){
              this.$post('/api/user/getBaseUserInfo',{uid:this.$route.query.uid}).then(res=>{
                  if(res.data.err_code ==0){
                      this.userBaseInfo = res.data.data;
                  }
              }).catch(err=>{
                  console.log(err)
              })
            },
            getUser(){
              let uid = this.$route.query.uid;
             this.$post('/api/user/user',{uid}).then(rsp=>{
                    if(rsp.data.err_code ==0){
                        this.user = rsp.data.data;
                    }
             }).catch((err)=>{
                 console.log(err)
             })
            },
            onClickLeft() {
                history.back()
            },
            imgfn(){
                let arr = []
               this.work.forEach(function (ele) {
                    arr.push(ele.imgurl)
               })
                ImagePreview(arr)
            },

        },
        created(){
            this.getDes();
            this.userBaseInfoFn();
            this.getUser()
            this.WorkGet()
            this.eduGet()
            this.LinksGet();
            document.body.style.backgroundColor='rgb(239, 243, 246)'
        }
    }
</script>

<style lang="less" scoped>
@import "../../public/css/user_info.less";
</style>
